<template>
  <div class="box">
    <h2>通讯录</h2>
    <div class="list">
      <ul>
        <li v-for="(item,index) in person" :key="index">
            <div>{{item.name}}，{{item.tel}}</div>
            <div class="btnlist">
                <span>拨号</span>
                <span @click="edit(index)">编辑</span>
                <span @click="del(index)">删除</span>
            </div>
        </li>
        
      </ul>
    </div>
    
  </div>
</template>

<script>
export default {
    props:["person"],
    mounted() {
        // console.log(this.person);
    },
    methods:{
        del(index){
            // this.$eventBus('del',index)
            this.$emit('del',index)
        },
        edit(index){
            // this.$eventBus('del',index)
            this.$emit('edit',index)
        }
    }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #f7f8fa;
}
h2{
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 10px;
    background-color: #fff;
}
.list>ul{
    display: flex;
    flex-direction: column;
}
li{
    height: 70px;
    display: flex;
    flex-direction: row;
    padding: 0px 20px;
    margin: 2px;
    background-color: #fff;
}
li>div{
    /* flex: 1; */
    line-height: 70px;
}
li>div:nth-child(1){
    flex: 1;
}
.btnlist{
    float: right;
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.btnlist>span{
    display: inline-block;
    padding: 5px;
    height:30px;
    line-height: 20px;
    
    border-radius: 3px;
    color: #fff;
}
.btnlist>span:nth-child(1){
    background-color: #17be74;
}
.btnlist>span:nth-child(2){
    background-color: #6495ed;
}
.btnlist>span:nth-child(3){
    background-color: #ff0000;
}

</style>